// 面向对象 

// 找一个机器  如果有直接用 没有自己造 
// 这个机器能批量生成对象  

// 连个选项卡 生产两个对象 
// 每个对象 都可以实现选项卡的功能 


// 每个对象  都是属性和方法的集合  


// 选项卡对象  应该有哪些属性和方法 ?

// 属性: 
//  1. 元素   (每个对象 实现各自的选项卡)
//  2. 所有的按钮
//  3. 所有的内容 

// 方法: init
//  绑定事件  
//  添加删除类名 


function Tabs(selector,options){
    this.ele = document.querySelector(selector);
    this.btns = this.ele.querySelectorAll('ul > li');
    this.contents = this.ele.querySelectorAll('ol > li');
    // this.init = function(){

    // }
    this.options = options || {}; // 如果没传实参 那么把一个空对象给到 this.options
    this.init(); // 实例化对象 直接调用自己的init方法
}
Tabs.prototype.init = function(){
    for(let i=0;i<this.btns.length;i++){
        this.btns[i].addEventListener(this.options.type || 'click',()=>{
            // console.log(this);// 事件源  事件处理函数this 事件源 
            // 面向对象函数中 this 代表本次调用构造函数创建的对象 
            // 我们本来想到的是 创建的对象 但是this是时间源 


            for(let j=0;j<this.btns.length;j++){
                this.btns[j].classList.remove('active');
                this.contents[j].classList.remove('active');
            }
            this.btns[i].classList.add('active');
            this.contents[i].classList.add('active');

        })
    }
}


// const t1 = new Tabs('#box1');  
// // t1.init()
// const t2 =new Tabs('#box2',{type:'mouseover'})

// // t2.init()
// const t3 =new Tabs('#box3')
// // t3.init()

// const t4 =new Tabs('#box4',{type:'mouseover'})
// // t4.init()


